/** IT头部面板部件
 * Author:      yangjq
 * CreateTime:  2023/9/7 16:24:15
 * LastEditor:  yangjq
 * ModifyTime:  2023/12/5 20:33:23
 * Description:
*/
<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
    <!-- <ItFloatPUE width="240px" height="240px" :pue="2" /> -->
    <div style="height: 100%;width:100%;display: flex; flex-direction: row; justify-content: space-between;align-items: center;padding-left:5%;padding-right:5%">
      <div style="height: 100%;display: flex; flex-direction: column; justify-content: space-around; align-items: start;margin: 0 12px">
        <it-header-item title="电力" sub-title="Electricity" content="市电供电" :is-warning="false">
          <img src="/images/screen-it/电力-B.png" class="it-header-icon"/>
        </it-header-item>
        <it-header-item title="平均温度" sub-title="Temperature" :content="data.tem" :is-warning="false">
          <img src="/images/screen-it/温度-B.png" class="it-header-icon"/>
        </it-header-item>
      </div>
      <div style="height: 100%;display: flex; flex-direction: column; justify-content: space-around; align-items: start;margin: 0 12px">
        <it-header-item title="空调" sub-title="Conditioner" :content="data.haveWarning" :is-warning="data.haveWarning==='有告警'">
          <img src="/images/screen-it/空调-B.png" class="it-header-icon"/>
        </it-header-item>
        <it-header-item title="平均湿度" sub-title="Humidity" :content="data.hum" :is-warning="false">
          <img src="/images/screen-it/湿度-B.png" class="it-header-icon"/>
        </it-header-item>
      </div>

      <div style="height: 100%;display: flex; flex-direction: column; justify-content: space-around; align-items: start;margin: 0 12px">
        <it-header-item title="漏水" sub-title="WaterLeakage" :content="data.leakage" :is-warning="data.leakage==='有'">
          <img src="/images/screen-it/漏水-B.png" class="it-header-icon"/>
        </it-header-item>
        <!-- <it-header-item title="告警数量" sub-title="NumberOfAlarms" :content="data.warningCount" :is-warning="data.warningCount>0">
          <img src="/images/screen-it/告警-B.png" class="it-header-icon"/>
        </it-header-item> -->
        <div style="height:43px;width:100%;"></div>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
  // import ItFloatPUE from '/@/views/admin/screen/it/ItFloatPUE.vue';
  import ItHeaderItem from "/@/views/admin/screen/it/itHeaderItem.vue";
  import {watch,ref} from "vue";
  import {defHttp} from "/@/utils/http/axios";

  const props = defineProps({
    roomIndex: { type: Number, default: 0 }
  });

  const roomList = ["数据机房","网络机房","UPS间"]

  const data = ref({
    warningCount:0,
    haveWarning:'无告警',
    leakage:'无',
    tem:'18℃',
    hum:'60%',
  });

  function loadData(name){

    let api = "/screen/it/itDownInfo";
    let params = {name:name};
    let options = {isTransformResponse: false};
    defHttp.get({url: api, params}, options)
      .then((res) => {
        if (res.success) {
          data.value = res.result

        } else {
          console.log('接口错误用默认');
        }
      })
  }


  watch(
    () => props.roomIndex,
    () => {
      loadData(roomList[props.roomIndex])
      // reloadData();
    },
    {
      immediate: true,
    }
  );
</script>

<style scoped lang="less">
  .it-header-icon {
    height: 36px;
    width: 36px;
    margin: 4px;
    opacity: 0.7;
  }
</style>
